<template>
  <el-dialog title="活动列表查看" :close-on-click-modal="false" :visible.sync="visible" class="view">
    <div>
      <div class="listLi">
        <div class="leftContent">活动时间:</div>
        <div>
          <p>开始时间：{{obj.startTime}}</p>
          <p>结束时间：{{obj.endTime}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">每人抽奖次数:</div>
        <div>{{obj.drawCount}}</div>
      </div>
      <div class="listLi">
        <div class="leftContent">分享激励:</div>
        <div>{{obj.shareDrawCount}}</div>
      </div>
      <!-- <div class="listLi">
        <div class="leftContent">分享后跳转链接:</div>
        <div>{{chapterVisit}}</div>
      </div> -->
      <div class="listLi">
        <div class="leftContent">每人最多抽中:</div>
        <div>{{obj.prizeDrawCount}}</div>
      </div>
      <div class="listLi">
        <div class="leftContent">中奖概率:</div>
        <div>{{obj.winnerPercentage * 100}}%</div>
      </div>
      <div class="listLi">
        <div class="leftContent">活动悬浮标:</div>
        <div><img :src="obj.coverUrl" style="width:60px"/></div>
      </div>
      <div class="listLi">
        <div class="leftContent">奖品:</div>
        <div style="width: 500px">
          <el-table border style="width: 100%;" :data="tableList">
            <el-table-column prop="prizeName" header-align="center" align="center" label='奖品'></el-table-column>
            <el-table-column prop="prizeCoverUrl" header-align="center" align="center" label="奖品图片">
              <template slot-scope="scope">
                <img :src="scope.row.prizeCoverUrl" alt="" style="width:60px;">
              </template>
            </el-table-column>
            <el-table-column prop="winnerPercentage" header-align="center" align="center" label="概率">
              <template slot-scope="scope">
               {{scope.row.winnerPercentage * 100}}%
              </template>
            </el-table-column>
            <el-table-column prop="prizeLevel" header-align="center" align="center" label="份数"></el-table-column>
            <el-table-column prop="prizeDrawedNum" header-align="center" align="center" label="已抽份数"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="listLi">
      <div class="leftContent">状态:</div>
      <div>{{obj.status}}</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible=false" style="text-align:center">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import ueditor from 'ueditor'

  export default {
    data () {
      return {
        showAudio: false,
        showVideo: false,
        visible: false,
        id: '',
        tableList:[],
        obj:{}
      }
    },
    methods: {
      init (id) {
        console.log(id)
        this.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$http({
            url: this.$http.adornUrl(`/lotterySurvey/lotteryactivity/info/${this.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.obj =  data.lotteryActivityVO;
              this.tableList = data.lotteryActivityVO.lotteryPrizeVOList;
            }
          })
          // }
        })
      }
    }
  }
</script>

<style scoped>
  .listLi{
    display: flex;
    margin: 20px 0;
  }
  .leftContent{
    width: 140px;
    text-align: right;
    margin-right: 25px;
  }
  .listLi p{
    margin: 0 0 5px 0;
  }
</style>
